<template>
	<div class="class404">
		<div class="wscn-http404">
			<div class="child" style="text-align: center">
				<img src="@/assets/errorImg/404.png" alt="" />
			</div>
			<div class="child">
				<div class="title">您访问的页面不存在 !</div>
				<div>请检查您输入的URL是否正确，或单击下面的按钮返回首页。</div>
				<el-button>
					<router-link to="/home">返回首页</router-link>
				</el-button>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import Vue, { defineComponent } from 'vue'
export default defineComponent({
	name: '404Page',
})
</script>
<style lang="scss" scoped>
.class404 {
	transform: translate(-50%, -50%);
	position: absolute;
	top: 40%;
	left: 50%;
}
.wscn-http404 {
	position: relative;
	width: 1200px;
	padding: 0 50px;
	overflow: hidden;
	display: flex;
	.child {
		width: 50%;
		height: 100%;
		text-align: left;
		.title {
			font-size: 32px;
			font-weight: bold;
			line-height: 40px;
			color: #1482f0;
			opacity: 1;
			margin-bottom: 20px;
			margin-top: 20px;
			-webkit-animation-name: slideUp-data-v-cb6dfc12;
			animation-name: slideUp-data-v-cb6dfc12;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}
		img {
			position: relative;
			float: left;
			width: 600px;
			overflow: hidden;
		}
		.el-button {
			margin-top: 20px;
			padding: 0;
			a {
				display: block;
				height: 40px;
				line-height: 40px;
				width: 98px;
				text-decoration: none;
			}
		}
	}
}
</style>